---
layout: example.html
title: WebGL points layer
shortdesc: Using a WebGL-optimized layer to render a large quantities of points
docs: >
  This example shows how to use a `WebGLPointsLayer` to show a large amount of points on the map.
  The layer is given a style in JSON format which allows a certain level of customization of the final reprensentation.

  The following operators can be used:

   * Reading operators:
     * `['get', 'attributeName']` fetches a feature attribute (it will be prefixed by `a_` in the shader)
       Note: those will be taken from the attributes provided to the renderer
     * `['var', 'varName']` fetches a value from the style variables, or 0 if undefined
     * `['time']` returns the time in seconds since the creation of the layer
     * `['zoom']` returns the current zoom level
     * `['resolution']` returns the current resolution

   * Math operators:
     * `['*', value1, value2]` multiplies `value1` by `value2`
     * `['/', value1, value2]` divides `value1` by `value2`
     * `['+', value1, value2]` adds `value1` and `value2`
     * `['-', value1, value2]` subtracts `value2` from `value1`
     * `['clamp', value, low, high]` clamps `value` between `low` and `high`
     * `['%', value1, value2]` returns the result of `value1 % value2` (modulo)
     * `['^', value1, value2]` returns the value of `value1` raised to the `value2` power

   * Transform operators:
     * `['case', condition1, output1, ...conditionN, outputN, fallback]` selects the first output whose corresponding
       condition evaluates to `true`. If no match is found, returns the `fallback` value.
       All conditions should be `boolean`, output and fallback can be any kind.
     * `['match', input, match1, output1, ...matchN, outputN, fallback]` compares the `input` value against all
       provided `matchX` values, returning the output associated with the first valid match. If no match is found,
       returns the `fallback` value.
       `input` and `matchX` values must all be of the same type, and can be `number` or `string`. `outputX` and
       `fallback` values must be of the same type, and can be of any kind.
     * `['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]` returns a value by interpolating between
       pairs of inputs and outputs; `interpolation` can either be `['linear']` or `['exponential', base]` where `base` is
       the rate of increase from stop A to stop B (i.e. power to which the interpolation ratio is raised); a value
       of 1 is equivalent to `['linear']`.
       `input` and `stopX` values must all be of type `number`. `outputX` values can be `number` or `color` values.
       Note: `input` will be clamped between `stop1` and `stopN`, meaning that all output values will be comprised
       between `output1` and `outputN`.

   * Logical operators:
     * `['<', value1, value2]` returns `true` if `value1` is strictly lower than `value2`, or `false` otherwise.
     * `['<=', value1, value2]` returns `true` if `value1` is lower than or equals `value2`, or `false` otherwise.
     * `['>', value1, value2]` returns `true` if `value1` is strictly greater than `value2`, or `false` otherwise.
     * `['>=', value1, value2]` returns `true` if `value1` is greater than or equals `value2`, or `false` otherwise.
     * `['==', value1, value2]` returns `true` if `value1` equals `value2`, or `false` otherwise.
     * `['!=', value1, value2]` returns `true` if `value1` does not equal `value2`, or `false` otherwise.
     * `['!', value1]` returns `false` if `value1` is `true` or greater than `0`, or `true` otherwise.
     * `['between', value1, value2, value3]` returns `true` if `value1` is contained between `value2` and `value3`
       (inclusively), or `false` otherwise.

   * Conversion operators:
     * `['array', value1, ...valueN]` creates a numerical array from `number` values; please note that the amount of
       values can currently only be 2, 3 or 4.
     * `['color', red, green, blue, alpha]` creates a `color` value from `number` values; the `alpha` parameter is
       optional; if not specified, it will be set to 1.
       Note: `red`, `green` and `blue` components must be values between 0 and 255; `alpha` between 0 and 1.
   Values can either be literals or another operator, as they will be evaluated recursively.
   Literal values can be of the following types:
    * `boolean`
    * `number`
    * `string`

tags: "webgl, point, layer, feature"
experimental: true
---

<div id="map" class="map"></div>
<label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
<select id="style-select">
  <option value="icons">Icons</option>
  <option value="triangles">Triangles, color related to population</option>
  <option value="triangles-latitude">Triangles, color related to latitude</option>
  <option value="circles">Circles, size related to population</option>
  <option value="circles-zoom">Circles, size related to zoom</option>
  <option value="rotating-bars">Rotating bars</option>
</select>
<textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
<small>
  <span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
  <span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
  &nbsp;
</small>
